<template>
  <div class="app-container">
    <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="BOM单组别" prop="bomGroup">
        <el-input
          v-model="queryParams.bomGroup"
          placeholder="请输入BOM单组别"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="bom单编号" prop="bomNo">
        <el-input
          v-model="queryParams.bomNo"
          placeholder="请输入bom单编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-input
          v-model="queryParams.state"
          placeholder="请输入状态"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="图号" prop="drawingNo">
        <el-input
          v-model="queryParams.drawingNo"
          placeholder="请输入图号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料id" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入物料id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料代码" prop="goodsCode">
        <el-input
          v-model="queryParams.goodsCode"
          placeholder="请输入物料代码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料名称" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入物料名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="规格型号" prop="specifications">
        <el-input
          v-model="queryParams.specifications"
          placeholder="请输入规格型号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料属性" prop="materialProperties">
        <el-input
          v-model="queryParams.materialProperties"
          placeholder="请输入物料属性"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input
          v-model="queryParams.unit"
          placeholder="请输入单位"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="数量" prop="number">
        <el-input
          v-model="queryParams.number"
          placeholder="请输入数量"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="成品率" prop="yield">
        <el-input
          v-model="queryParams.yield"
          placeholder="请输入成品率"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否特性配置来源物料" prop="sourceMaterial">
        <el-input
          v-model="queryParams.sourceMaterial"
          placeholder="请输入是否特性配置来源物料"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="跳层" prop="skipFloor">
        <el-input
          v-model="queryParams.skipFloor"
          placeholder="请输入跳层"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="建立人员" prop="buildingPeople">
        <el-input
          v-model="queryParams.buildingPeople"
          placeholder="请输入建立人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="建立日期" prop="creationDate">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.creationDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择建立日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="审核人员" prop="auditor">
        <el-input
          v-model="queryParams.auditor"
          placeholder="请输入审核人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核日期" prop="auditDate">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.auditDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择审核日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="使用人员" prop="users">
        <el-input
          v-model="queryParams.users"
          placeholder="请输入使用人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="使用日期" prop="dateUse">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.dateUse"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择使用日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="最后更新人员" prop="updatePeople">
        <el-input
          v-model="queryParams.updatePeople"
          placeholder="请输入最后更新人员"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最后更新日期" prop="updateDate">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.updateDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择最后更新日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="子项类型" prop="subitemType">
        <el-input
          v-model="queryParams.subitemType"
          placeholder="请输入子项类型"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="基本用量" prop="consumption">
        <el-input
          v-model="queryParams.consumption"
          placeholder="请输入基本用量"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="生效日期" prop="effectiveDate">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.effectiveDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择生效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="失效日期" prop="expirationDate">
        <el-date-picker clearable size="small" style="width: 200px"
          v-model="queryParams.expirationDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择失效日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="损耗率" prop="lossRate">
        <el-input
          v-model="queryParams.lossRate"
          placeholder="请输入损耗率"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="关键件" prop="keyParts">
        <el-input
          v-model="queryParams.keyParts"
          placeholder="请输入关键件"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="使用状态" prop="usageStatus">
        <el-select v-model="queryParams.usageStatus" placeholder="请选择使用状态" clearable size="small">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否禁用" prop="disabled">
        <el-input
          v-model="queryParams.disabled"
          placeholder="请输入是否禁用"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="queryParams.remarks"
          placeholder="请输入备注"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注1" prop="remarks1">
        <el-input
          v-model="queryParams.remarks1"
          placeholder="请输入备注1"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注2" prop="remarks2">
        <el-input
          v-model="queryParams.remarks2"
          placeholder="请输入备注2"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注3" prop="remarks3">
        <el-input
          v-model="queryParams.remarks3"
          placeholder="请输入备注3"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="存在替代关系" prop="substitutionRelationship">
        <el-input
          v-model="queryParams.substitutionRelationship"
          placeholder="请输入存在替代关系"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="bom版本" prop="bomVersion">
        <el-input
          v-model="queryParams.bomVersion"
          placeholder="请输入bom版本"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['base:bom:add']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['base:bom:edit']"
        >修改</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['base:bom:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['base:bom:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      v-loading="loading"
      :data="bomList"
      @selection-change="handleSelectionChange"
      @row-click="openDetails"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="bom id" align="center" prop="bomId" /> -->
      <el-table-column label="BOM单组别" align="center" prop="bomGroup" />
      <el-table-column label="bom单编号" align="center" prop="bomNo" />
      <el-table-column label="状态" align="center" prop="state" />
      <el-table-column label="图号" align="center" prop="drawingNo" />
      <!-- <el-table-column label="物料id" align="center" prop="goodsId" />
      <el-table-column label="物料代码" align="center" prop="goodsCode" />
      <el-table-column label="物料名称" align="center" prop="goodsName" />
      <el-table-column label="规格型号" align="center" prop="specifications" />
      <el-table-column label="物料属性" align="center" prop="materialProperties" />
      <el-table-column label="单位" align="center" prop="unit" /> -->
      <el-table-column
        label="产品物料属性"
        align="center"
        prop="prodProperties"
      />
      <el-table-column label="产品编号" align="center" prop="productNumber" />
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="产品数量" align="center" prop="number" />
      <el-table-column label="产品单位" align="center" prop="productUnit" />
      <el-table-column label="产品型号" align="center" prop="specModel" />
      <el-table-column label="成品率" align="center" prop="yield" />
      <el-table-column label="跳层" align="center" prop="skipFloor" />

      <!-- <el-table-column label="子项类型" align="center" prop="subitemType" />
      <el-table-column label="基本用量" align="center" prop="consumption" /> -->

      <!-- <el-table-column label="损耗率" align="center" prop="lossRate" /> -->
      <!-- <el-table-column label="关键件" align="center" prop="keyParts" /> -->
      <el-table-column
        label="使用状态"
        align="center"
        prop="usageStatus"
        :formatter="usageStatusFormat"
      />
      <el-table-column label="是否禁用" align="center" prop="disabled" />
      <!-- <el-table-column label="备注" align="center" prop="remarks" />
      <el-table-column label="备注1" align="center" prop="remarks1" />
      <el-table-column label="备注2" align="center" prop="remarks2" />
      <el-table-column label="备注3" align="center" prop="remarks3" /> -->
      <!-- <el-table-column label="存在替代关系" align="center" prop="substitutionRelationship" /> -->
      <el-table-column label="bom版本" align="center" prop="bomVersion" />
            <el-table-column label="生效日期" align="center" prop="effectiveDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.effectiveDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效日期" align="center" prop="expirationDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.expirationDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
       <el-table-column label="建立人员" align="center" prop="buildingPeople" />
      <el-table-column label="建立日期" align="center" prop="creationDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.creationDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核人员" align="center" prop="auditor" />
      <el-table-column label="审核日期" align="center" prop="auditDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.auditDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用人员" align="center" prop="users" />
      <el-table-column label="使用日期" align="center" prop="dateUse" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dateUse, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后更新人员" align="center" prop="updatePeople" />
      <el-table-column label="最后更新日期" align="center" prop="updateDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['base:bom:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['base:bom:remove']"
          >删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :title="title"
      :visible.sync="open1"
      width="1500px"
      append-to-body
    >
      <el-form ref="form1" :model="form1" :rules="rules1" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="BOM单组别" prop="bomGroup">
              <el-input
                v-model="form1.bomGroup"
                placeholder="请输入BOM单组别"
                
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="bom单编号" prop="bomNo">
              <el-input
                v-model="form1.bomNo"
                placeholder="请输入bom单编号"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-input
                v-model="form1.state"
                placeholder="请输入状态"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="图号" prop="drawingNo">
              <el-input
                v-model="form1.drawingNo"
                placeholder="请输入图号"
                readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="物料编号" prop="productNumber">
              <el-input
                v-model="form1.productNumber"
                placeholder="请输入物料编号"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料名称" prop="productName">
              <el-input
                v-model="form1.productName"
                placeholder="请输入物料名称"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料数量" prop="number">
              <el-input
                v-model="form1.number"
                placeholder="请输入物料数量"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料单位" prop="productUnit">
              <el-input
                v-model="form1.productUnit"
                placeholder="请输入物料单位"
                readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="物料型号" prop="specModel">
              <el-input
                v-model="form1.specModel"
                placeholder="请输入物料型号"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料属性" prop="prodProperties">
              <el-input
                v-model="form1.prodProperties"
                placeholder="请输入物料属性"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成品率" prop="yield">
              <el-input
                v-model="form1.yield"
                placeholder="请输入成品率"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="跳层" prop="skipFloor">
              <el-input
                v-model="form1.skipFloor"
                placeholder="请输入跳层"
                readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="使用状态" prop="usageStatus">
                            <el-input
                v-model="form1.usageStatus"
                placeholder="请选择使用状态"
                readonly
              />
              
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否禁用" prop="disabled">
              <el-input
                v-model="form1.disabled"
                placeholder="请输入是否禁用"
                readonly
              />
             
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="bom版本" prop="bomVersion">
              <el-input
                v-model="form1.bomVersion"
                placeholder="请输入bom版本"
                readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="建立人员" prop="buildingPeople">
              <el-input
                v-model="form1.buildingPeople"
                placeholder="请输入建立人员" readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建立日期" prop="creationDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form1.creationDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择建立日期" readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核人员" prop="auditor">
              <el-input v-model="form1.auditor" placeholder="请输入审核人员" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核日期" prop="auditDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form1.auditDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择审核日期" readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="使用人员" prop="users">
              <el-input v-model="form1.users" placeholder="请输入使用人员" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用日期" prop="dateUse">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form1.dateUse"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择使用日期" readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最后更新人员" prop="updatePeople">
              <el-input
                v-model="form1.updatePeople"
                placeholder="请输入最后更新人员" readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="最后更新日期" prop="updateDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form1.updateDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择最后更新日期" readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="生效日期" prop="effectiveDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form1.effectiveDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择生效日期" readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="失效日期" prop="expirationDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form1.expirationDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择失效日期" readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          :data="multiplee"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <!-- <el-table-column label="bom id" align="center" prop="bomId" /> -->
          <!-- <el-table-column label="物料id" align="center" prop="goodsId" /> -->

          <el-table-column align="center" label="顺序号" prop="sequenceNumber">
        <template scope="scope">
            <span>{{scope.$index + 1}}</span>
        </template>
  </el-table-column>
          <el-table-column
            label="物料代码"
            align="center"
            prop="goodsCode"
            width="100"
          />
          <el-table-column
            label="物料名称"
            align="center"
            prop="goodsName"
            width="100"
          />
          <el-table-column
            label="规格型号"
            align="center"
            prop="specifications"
            width="100"
          />
          <el-table-column
            label="物料属性"
            align="center"
            prop="materialProperties"
            width="100"
          />
          <el-table-column
            label="单位"
            align="center"
            prop="unit"
            width="100"
          />
          <el-table-column
            label="基本用量"
            align="center"
            prop="consumption"
            width="100"
          />
          <el-table-column
            label="损耗率"
            align="center"
            prop="lossRate"
            width="100"
          />
          <el-table-column
            label="是否特性配置来源物料"
            align="center"
            prop="sourceMaterial"
            width="100"
          />

          <el-table-column
            label="子项类型"
            align="center"
            prop="subitemType"
            width="100"
          />

          <el-table-column
            label="关键件"
            align="center"
            prop="keyParts"
            width="100"
          />
          <el-table-column
            label="使用状态"
            align="center"
            prop="usageStatus"
            :formatter="usageStatusFormat"
            width="100"
          />
          <el-table-column
            label="是否禁用"
            align="center"
            prop="disabled"
            width="100"
          />
          <el-table-column
            label="备注"
            align="center"
            prop="remarks"
            width="100"
          />
          <el-table-column
            label="备注1"
            align="center"
            prop="remarks1"
            width="100"
          />
          <el-table-column
            label="备注2"
            align="center"
            prop="remarks2"
            width="100"
          />
          <el-table-column
            label="备注3"
            align="center"
            prop="remarks3"
            width="100"
          />
          <el-table-column
            label="存在替代关系"
            align="center"
            prop="substitutionRelationship"
            width="100"
          />
        </el-table>
      </el-form>
    </el-dialog>
    <!-- 添加或修改bom对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="BOM单组别" prop="bomGroup">
          <el-input v-model="form.bomGroup" placeholder="请输入BOM单组别" />
        </el-form-item>
        <el-form-item label="bom单编号" prop="bomNo">
          <el-input v-model="form.bomNo" placeholder="请输入bom单编号" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input v-model="form.state" placeholder="请输入状态" />
        </el-form-item>
        <el-form-item label="图号" prop="drawingNo">
          <el-input v-model="form.drawingNo" placeholder="请输入图号" />
        </el-form-item>
        <el-form-item label="物料id" prop="goodsId">
          <el-input v-model="form.goodsId" placeholder="请输入物料id" />
        </el-form-item>
        <el-form-item label="物料代码" prop="goodsCode">
          <el-input v-model="form.goodsCode" placeholder="请输入物料代码" />
        </el-form-item>
        <el-form-item label="物料名称" prop="goodsName">
          <el-input v-model="form.goodsName" placeholder="请输入物料名称" />
        </el-form-item>
        <el-form-item label="规格型号" prop="specifications">
          <el-input
            v-model="form.specifications"
            placeholder="请输入规格型号"
          />
        </el-form-item>
        <el-form-item label="物料属性" prop="materialProperties">
          <el-input
            v-model="form.materialProperties"
            placeholder="请输入物料属性"
          />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="产品id" prop="productId">
          <el-input v-model="form.productId" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="产品数量" prop="number">
          <el-input v-model="form.number" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="产品单位" prop="productUnit">
          <el-input v-model="form.productUnit" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="产品型号" prop="specModel">
          <el-input v-model="form.specModel" placeholder="请输入数量" />
        </el-form-item>

        <el-form-item label="成品率" prop="yield">
          <el-input v-model="form.yield" placeholder="请输入成品率" />
        </el-form-item>
        <el-form-item label="是否特性配置来源物料" prop="sourceMaterial">
          <el-select
            v-model="form.sourceMaterial"
            placeholder="请输入是否特性配置来源物料"
          >
            <el-option
              v-for="item1 in sourceMaterialOptions"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建立人员" prop="buildingPeople">
          <el-input
            v-model="form.buildingPeople"
            placeholder="请输入建立人员"
          />
        </el-form-item>
        <el-form-item label="建立日期" prop="creationDate">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.creationDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择建立日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核人员" prop="auditor">
          <el-input v-model="form.auditor" placeholder="请输入审核人员" />
        </el-form-item>
        <el-form-item label="审核日期" prop="auditDate">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.auditDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择审核日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="使用人员" prop="users">
          <el-input v-model="form.users" placeholder="请输入使用人员" />
        </el-form-item>
        <el-form-item label="使用日期" prop="dateUse">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.dateUse"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择使用日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最后更新人员" prop="updatePeople">
          <el-input
            v-model="form.updatePeople"
            placeholder="请输入最后更新人员"
          />
        </el-form-item>
        <el-form-item label="最后更新日期" prop="updateDate">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.updateDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择最后更新日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="子项类型" prop="subitemType">
          <el-input v-model="form.subitemType" placeholder="请输入子项类型" />
        </el-form-item>
        <el-form-item label="基本用量" prop="consumption">
          <el-input v-model="form.consumption" placeholder="请输入基本用量" />
        </el-form-item>
        <el-form-item label="生效日期" prop="effectiveDate">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.effectiveDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择生效日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="expirationDate">
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="form.expirationDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择失效日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="损耗率" prop="lossRate">
          <el-input v-model="form.lossRate" placeholder="请输入损耗率" />
        </el-form-item>
        <el-form-item label="关键件" prop="keyParts">
          <el-input v-model="form.keyParts" placeholder="请输入关键件" />
        </el-form-item>
        <el-form-item label="使用状态" prop="usageStatus">
          <el-select v-model="form.usageStatus" placeholder="请选择使用状态">
            <el-option
              v-for="dict in usageStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否禁用" prop="disabled">
          <el-select v-model="form.disabled" placeholder="请输入是否禁用">
            <el-option
              v-for="item1 in disabledOptions"
              :key="item1.value"
              :label="item1.label"
              :value="item1.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="备注1" prop="remarks1">
          <el-input v-model="form.remarks1" placeholder="请输入备注1" />
        </el-form-item>
        <el-form-item label="备注2" prop="remarks2">
          <el-input v-model="form.remarks2" placeholder="请输入备注2" />
        </el-form-item>
        <el-form-item label="备注3" prop="remarks3">
          <el-input v-model="form.remarks3" placeholder="请输入备注3" />
        </el-form-item>
        <el-form-item label="存在替代关系" prop="substitutionRelationship">
          <el-input
            v-model="form.substitutionRelationship"
            placeholder="请输入存在替代关系"
          />
        </el-form-item>
        <el-form-item label="bom版本" prop="bomVersion">
          <el-input v-model="form.bomVersion" placeholder="请输入bom版本" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listNumber,
  listBomm,
  listBom,
  getBom,
  delBom,
  addBom,
  updateBom,
  exportBom,
  delBomByBomNo,
} from "@/api/base/bom";

export default {
  name: "Bom",
  components: {},
  data() {
    return {
      readonly: true,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // bom表格数据
      bomList: [],
      multiplee: [],
      //存放选中值的数组
      multipleTable: [],
      // 弹出层标题
      title: "",

      // 是否显示弹出层
      open: false,
      open1: false,
      // 使用状态字典
      usageStatusOptions: [],
      //是否禁用
      disabledOptions: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      //是否特性配置
      sourceMaterialOptions: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bomGroup: undefined,
        bomNo: undefined,
        state: undefined,
        drawingNo: undefined,
        goodsId: undefined,
        goodsCode: undefined,
        goodsName: undefined,
        specifications: undefined,
        materialProperties: undefined,
        unit: undefined,
        number: undefined,
        yield: undefined,
        sourceMaterial: undefined,
        skipFloor: undefined,
        buildingPeople: undefined,
        creationDate: undefined,
        auditor: undefined,
        auditDate: undefined,
        users: undefined,
        dateUse: undefined,
        updatePeople: undefined,
        updateDate: undefined,
        subitemType: undefined,
        consumption: undefined,
        effectiveDate: undefined,
        expirationDate: undefined,
        lossRate: undefined,
        keyParts: undefined,
        usageStatus: undefined,
        disabled: undefined,
        remarks: undefined,
        remarks1: undefined,
        remarks2: undefined,
        remarks3: undefined,
        substitutionRelationship: undefined,
        bomVersion: undefined,
        productNumber: undefined,
        productName: undefined,
        productId: undefined,
        productUnit: undefined,
        specModel: undefined,
      },
      // 表单参数
      form: {},
      form1: {},
      // 表单校验
      rules: {},
      rules1: {},
    };
  },
  created() {
    this.getList();
    this.getDicts("base_bom_status").then((response) => {
      this.usageStatusOptions = response.data;
    });
  },
  methods: {
    openDetails(row) {
      this.loading = true;
      this.open1 = true;
      this.title = "Bom详情页";
      console.log(row);
      listNumber(row.productNumber).then((response) => {
        //  this.multiplee.push(response.data);
        this.form1 = row;
        this.multiplee = response.data;
        this.loading = false;
      });
    },
    /** 查询bom列表 */
    getList() {
      this.loading = true;
      listBomm(this.queryParams).then((response) => {
        this.bomList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    usageStatusFormat(row, column) {
      return this.selectDictLabel(this.usageStatusOptions, row.usageStatus);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        bomId: undefined,
        bomGroup: undefined,
        bomNo: undefined,
        state: undefined,
        drawingNo: undefined,
        goodsId: undefined,
        goodsCode: undefined,
        goodsName: undefined,
        specifications: undefined,
        materialProperties: undefined,
        unit: undefined,
        number: undefined,
        yield: undefined,
        sourceMaterial: undefined,
        skipFloor: undefined,
        buildingPeople: undefined,
        creationDate: undefined,
        auditor: undefined,
        auditDate: undefined,
        users: undefined,
        dateUse: undefined,
        updatePeople: undefined,
        updateDate: undefined,
        subitemType: undefined,
        consumption: undefined,
        effectiveDate: undefined,
        expirationDate: undefined,
        lossRate: undefined,
        keyParts: undefined,
        usageStatus: undefined,
        disabled: undefined,
        remarks: undefined,
        remarks1: undefined,
        remarks2: undefined,
        remarks3: undefined,
        substitutionRelationship: undefined,
        bomVersion: undefined,
        productNumber: undefined,
        productName: undefined,
        productId: undefined,
        productUnit: undefined,
        specModel: undefined,
      };
      this.resetForm("form");
    },
    reset1() {
      this.form1 = {
        bomId: undefined,
        bomGroup: undefined,
        bomNo: undefined,
        state: undefined,
        drawingNo: undefined,
        goodsId: undefined,
        goodsCode: undefined,
        goodsName: undefined,
        specifications: undefined,
        materialProperties: undefined,
        unit: undefined,
        number: undefined,
        yield: undefined,
        sourceMaterial: undefined,
        skipFloor: undefined,
        buildingPeople: undefined,
        creationDate: undefined,
        auditor: undefined,
        auditDate: undefined,
        users: undefined,
        dateUse: undefined,
        updatePeople: undefined,
        updateDate: undefined,
        subitemType: undefined,
        consumption: undefined,
        effectiveDate: undefined,
        expirationDate: undefined,
        lossRate: undefined,
        keyParts: undefined,
        usageStatus: undefined,
        disabled: undefined,
        remarks: undefined,
        remarks1: undefined,
        remarks2: undefined,
        remarks3: undefined,
        substitutionRelationship: undefined,
        bomVersion: undefined,
        productNumber: undefined,
        productName: undefined,
        productId: undefined,
        productUnit: undefined,
        specModel: undefined,
      };
      this.resetForm("form1");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.bomId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
      this.multipleTable = selection;
      console.log(this.multipleTable);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加bom";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      var bomId = this.multipleTable.map((item) => item.bomId)[0];
      //console.log(bomId)
      // getBom(bomId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改bom";
      // });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.bomId != null) {
            updateBom(this.form).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBom(this.form).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
 /** 删除按钮操作 */
    handleDelete() {
      var productNumber = this.multipleTable.map((item) => item.productNumber)[0];
      this.$confirm('是否确认删除bom编号为"' + productNumber + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delBomByBomNo(productNumber);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有bom数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportBom(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
